<template>
  <div class="orderRecordCmpt">
    <div class="form-baseinfo">
      <!-- 查询表单 -->
      <LPSearchBar
        v-model="searchModel"
        :search-data="searchData"
        label-width="100px"
        @handleSearchSubmit="handleSearchSubmit"
        @handleSearchReset="handleSearchReset"
      />
    </div>
    <div class="form-baseinfo">
      <div class="btn_area">
        <el-button size="medium" type="primary" @click="exportInfo">导出数据</el-button>
      </div>
      <!-- 表格列表 -->
      <LPTablePage
        :show-index="true"
        :show-indexfixed="false"
        index-label="顺序"
        :table-data="tableData"
        :table-column="tableColumn"
        :total="total"
        :current-page="currentPage"
        align="center"
        class="table"
        @handleSizeChange="handleSizeChange"
        @handleCurrentChange="handleCurrentChange"
      >
        <template slot="couponModels" slot-scope="{ row }">
          <div v-if="row.couponModels.length > 0">
            <div v-for="(item, index) in row.couponModels" :key="index">
              <el-link type="primary" @click="goToCouponManage(item.couponId)">{{ item.couponName }}</el-link>
            </div>
          </div>
        </template>
        <template slot="statusName" slot-scope="{ row }">
          <div v-if="row.statusName === '已下单'">
            <div>
              <div style="color: #ee7533">待结算</div>
              <timingModule
                :end-time="new Date(row.createTime).setMinutes(new Date(row.createTime).getMinutes() + 15)"
              />
            </div>
          </div>
          <span v-else style="color: #2cad00">{{ row.statusName }}</span>
        </template>
        <template slot="cz" slot-scope="{ row }">
          <span v-if="new Date(row.createTime).setMinutes(new Date(row.createTime).getMinutes() + 15) > new Date()">
            <el-button
              v-if="row.status == 1"
              v-hasPermi="['LaborProtection.Orders.Settle']"
              type="text"
              @click="handColumnClick(row, 'settle')"
            >
              结算
            </el-button>
          </span>
          <el-button style="margin-left: 10px" type="text" @click="handColumnClick(row, 'detail')"> 详情 </el-button>
          <el-button
            v-if="row.status == 1"
            v-hasPermi="['LaborProtection.Orders.Canceled']"
            type="text"
            style="color: #999999"
            @click="handColumnClick(row, 'cancel')"
          >
            取消
          </el-button>
          <el-button
            v-if="row.status == -1"
            v-hasPermi="['LaborProtection.Orders.Delete']"
            type="text"
            @click="handColumnClick(row, 'delete')"
          >
            删除
          </el-button>
        </template>
      </LPTablePage>
    </div>
    <!-- 详情 -->
  </div>
</template>

<script>
import { getOrdersList, cancelByIdOrder, deleteByIdOrder } from '@/api/LaborProtection/order'
import { GetOrdersListExcel } from '@/api/LaborProtection/export'
import { download, parseTime } from '@/utils/lpUtils'
import timingModule from './timingModule.vue'
import LPTablePage from '@/components/LPTablePage/index.vue'
import LPSearchBar from '@/components/LPSearchBar/index.vue'

export default {
  name: 'OrderRecordCmpt',
  components: { timingModule, LPTablePage, LPSearchBar },
  data() {
    return {
      searchModel: {
        // EnabledMark:1
      },
      // deadline4: Date.now() + (new Date().setHours(23, 59, 59) - Date.now()),
      searchData: [
        { label: '', placeholder: '员工卡号', prop: 'UserCardNo', labelWidth: '200px' },
        { label: '', placeholder: '员工姓名', prop: 'UserName', labelWidth: '200px' },
        {
          label: '',
          placeholder: '状态',
          prop: 'Status',
          type: 'select',
          width: '80px',
          option: [
            { label: '已下单', value: 1 },
            // { label: '派送中', value: 2 },
            // { label: '结算待确认', value: 1 },
            { label: '已结算', value: 4 },
            { label: '已取消', value: -1 }
          ]
        },
        { label: '', placeholder: '订单编号', prop: 'SONo', labelWidth: '' },
        // {
        //   label: '结算方式：',
        //   placeholder: '请输入',
        //   prop: 'settleType',
        //   type: 'select',
        //   option: [{ label: '卡金额结算', value: 1 }]
        // }, //, {label: '优惠券结算', value: 2}
        {
          label: '',
          prop: 'StartOrderTime',
          type: 'datetimerange',
          placeholder: '开始时间',
          width: '100px'
        }
      ],
      // 列表数据
      tableData: [],
      // 表格字段
      tableColumn: [
        { label: '订单编号', prop: 'soNo' },
        { label: '姓名', prop: 'userName' },
        { label: '卡号', prop: 'userCardNo' },
        { label: '工号', prop: 'userJobNum' },
        { label: '部门', prop: 'departmentName', width: 220 },
        { label: '岗位', prop: 'jobName' },
        // { label: '购买商品', prop: 'commodity' },
        // { label: '优惠券名称', prop: 'couponModels', width: 180, render: true },
        // { label: '结算方式', prop: 'settleTypeName' },
        // { label: '结算金额', prop: 'settlementMoney' },
        // { label: '下单金额', prop: 'soMoney' },
        { label: '订单状态', prop: 'statusName', render: true, width: 120 },
        { label: '创建日期', prop: 'createTime' },
        // {label: "同步成品物流", prop: "extraProperties", hideTooLtip:true, render:true},
        { label: '操作', prop: 'cz', width: 200, render: true }
      ],
      dialogVisible: false,
      total: 0,
      currentPage: 1,
      pageSize: 10
    }
  },
  created() {},
  mounted() {
    this.getList()
  },
  methods: {
    goToCouponManage(id) {
      this.$router.push({
        path: '/laborProtection/couponManage',
        query: {
          data: JSON.stringify({
            id: id,
            back: '/laborProtection/order'
          })
        }
      })
    },
    // 查询按钮
    handleSearchSubmit() {
      this.currentPage = 1
      this.getList()
    },
    // 重置按钮
    handleSearchReset() {
      this.handleSearchSubmit()
    },
    // 获取列表
    getList() {
      const params = {
        ...this.searchModel,
        SkipCount: this.currentPage,
        MaxResultCount: this.pageSize
      }
      if (typeof this.searchModel.StartOrderTime !== 'undefined') {
        params.SDateTime = parseTime(this.searchModel.StartOrderTime[0])
        params.EDateTime = parseTime(this.searchModel.StartOrderTime[1])
        this.$delete(params, 'StartOrderTime')
      }
      getOrdersList(params).then((res) => {
        res.items.forEach((item) => {
          item.commodity = ''
          if (item.ordersProducts != null) {
            item.ordersProducts.forEach((orderItem) => {
              if (item.commodity == '') {
                item.commodity = orderItem.pTitle
              } else {
                item.commodity = item.commodity + '、' + orderItem.pTitle
              }
            })
          }
        })
        this.tableData = res.items
        this.total = res.totalCount
      })
    },
    exportInfo() {
      const params = {
        ...this.searchModel,
        SkipCount: this.currentPage,
        MaxResultCount: this.pageSize
      }
      if (typeof this.searchModel.StartOrderTime !== 'undefined') {
        params.SDateTime = parseTime(this.searchModel.StartOrderTime[0])
        params.EDateTime = parseTime(this.searchModel.StartOrderTime[1])
        this.$delete(params, 'StartOrderTime')
      }
      GetOrdersListExcel(params).then((res) => {
        download(res, '收银订单列表')
      })
    },
    handleSizeChange(v) {
      this.pageSize = v
      this.currentPage = 1
      this.getList()
    },
    handleCurrentChange(v) {
      this.currentPage = v
      this.getList()
    },
    // 表格列按钮点击事件
    handColumnClick(row, name) {
      if (name == 'detail') {
        this.$router.push({
          path: '/laborProtection/order/detail',
          query: {
            data: JSON.stringify({
              id: row.id,
              isSettle: false
            })
          }
        })
      } else if (name == 'settle') {
        this.$router.push({
          path: '/laborProtection/order/detail',
          query: {
            data: JSON.stringify({
              id: row.id,
              isSettle: true
            })
          }
        })
      } else if (name == 'cancel') {
        this.$confirm('是否取消该订单？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            cancelByIdOrder(row.id).then((res) => {
              if (!res.error) {
                this.$message.success('取消成功')
                this.getList()
              }
            })
          })
          .catch(() => {
            this.$message.info('已取消该操作')
          })
      } else if (name == 'delete') {
        this.$confirm('是否删除该条记录？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then((value) => {
            console.log(value)
            deleteByIdOrder(row.id).then((res) => {
              if (!res.error) {
                this.$message.success('删除成功')
                this.getList()
              }
            })
          })
          .catch((value) => {
            console.log(value)
            this.$message.info('已取消该操作')
          })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.orderRecordCmpt {
  .form-baseinfo {
    ::v-deep .search-bar input.el-input__inner {
      width: 2rem;
    }
  }
}

.btn_area {
  background-color: #fff;
  padding-left: 29px;
  padding-bottom: 20px;
  padding-top: 20px;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}

::v-deep .table {
  .red {
    color: $high_risk_color;
  }
}
</style>
